<html>
  <head>
    <style>
      body {
        margin: 0;
        zoom: 200%;
      }
      .list {
        display: flex;
        flex-direction: column;
        width: max-content;
        overflow: scroll;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        height: min-content;
        border: 1px solid #ddd;
      }
      th,
      td {
        text-align: left;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-right: 5px;
        display: flex;
        flex-direction: column;
        width: max-content;
      }
      tr:nth-child(even) {
        background-color: #f5f5f5;
      }
      .line1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: max-content;
      }
      .line2 {
        display: flex;
        flex-direction: row;
        width: max-content;
      }
      .id {
        color: #444444;
        font-size: x-small;
        background-color: #f8f8f8;
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 1px;
        padding-bottom: 1px;
        border-radius: 5px;
        border-color: #dee2e6;
        border-style: solid;
        border-width: 1px;
        margin-left: 5px;
      }
      .command {
        color: #444444;
        margin-left: 5px;
      }
      .title {
        color: #6c757d;
        font-size: xx-small;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <div class="list">
      <table>
        {% for record in shindan_records %}
        <tr>
          <td>
            <div class="line1">
              <div class="id">{{ record.shindan_id }}</div>
              <div class="command">{{ record.command }}</div>
            </div>
            <div class="line2">
              <div class="title">{{ record.title }}</div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </table>
    </div>
  </body>
</html>
